<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${c}"></title>
    <link rel="stylesheet" th:href="@{/style.css}" href="../static/style.css">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.min.css}"
          href="webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.min.js}"
            src="webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"
            src="webjars/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/webjars/highcharts/8.0.4/highcharts.js}"
            src="webjars/highcharts/8.0.4/highcharts.js"></script>
    <script type="text/javascript" th:src="@{/webjars/highcharts/8.0.4/modules/exporting.js}"
            src="webjars/highcharts/8.0.4/modules/exporting.js"></script>
    <script type="text/javascript" th:src="@{/webjars/highcharts/8.0.4/modules/oldie.js}"
            src="webjars/highcharts/8.0.4/modules/oldie.js"></script>
</head>
<body>
<script th:inline="javascript">
    var globalOrCountry = [[${c}]] === "All" ? "全球" : [[${c}]];
    var global_sum = [[${global_sum}]];
    var country_sum = [[${country_sum}]];
    var global_date_add = [[${global_date_add}]];
    var country_date_add = [[${country_date_add}]];
</script>
<div class="top">

    <div class="div_header">
        <div class="left">
            <p id="p1">新型冠状病毒肺炎</p>
            <h2>疫情追踪数据报告</h2>
            <h1>
                <script th:inline="javascript">document.write(globalOrCountry)</script>
            </h1>
            <p id="p2">
                总数：
                <script th:inline="javascript">
                    if (globalOrCountry == "全球") {
                        document.write(global_sum);
                    } else {
                        document.write(country_sum);
                    }
                </script>
            </p>
        </div>
    </div>

    <div id="container1" style="width:1400px;height:500px;margin: 20px auto"></div>
    <div id="container2" style="width:1400px;height:500px;margin: 20px auto"></div>
    <script>
        if (globalOrCountry === "全球") {
            document.getElementById('container2').style.display = "none";
        } else {
            document.getElementById('container1').style.display = "none";
        }
    </script>
    <script>
        var chart = Highcharts.chart('container1', {
            chart: {
                type: 'line'
            },
            title: {
                text: '每月确诊数折线图'
            },
            subtitle: {
                text: '数据来源: https://github.com/CSSEGISandData/COVID-19/blob/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv'
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                title: {
                    text: '数量(人)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        // 开启数据标签
                        enabled: true
                    },
                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    enableMouseTracking: false
                }
            },
            series: [{
                name: '月确诊数',
                data: [global_date_add[0], global_date_add[1], global_date_add[2], global_date_add[3],
                    global_date_add[4], global_date_add[5], global_date_add[6], global_date_add[7],
                    global_date_add[8], global_date_add[9], global_date_add[10], global_date_add[11]]
            }]
        });

    </script>
    <script>
        var chart = Highcharts.chart('container2', {
            chart: {
                type: 'line'
            },
            title: {
                text: '每月确诊数折线图'
            },
            subtitle: {
                text: '数据来源: https://github.com/CSSEGISandData/COVID-19/blob/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv'
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                title: {
                    text: '数量(人)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        // 开启数据标签
                        enabled: true
                    },
                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    enableMouseTracking: false
                }
            },
            series: [{
                name: '月确诊数',
                data: [country_date_add[0], country_date_add[1], country_date_add[2], country_date_add[3],
                    country_date_add[4], country_date_add[5], country_date_add[6], country_date_add[7],
                    country_date_add[8], country_date_add[9], country_date_add[10], country_date_add[11]]
            }]
        });

    </script>

    <div class="div_select">
        <p style="font-size: 15px;">选择要查询的国家：</p>
        <form action="#" th:action="@{/javaweb/show}" th:object="${regionStatsFromSelect}" method="post">
        <span>
            <select th:field="*{country}" class="form-control" style="width: auto;">
                <option th:value="All">All</option>
                <option th:each="country:${allCountry}" th:text="${country}" th:value="${country}"></option>
            </select>
        </span>
            <span>
            <button class="btn btn-default" id="button1" type="submit">确 认</button>
        </span>
        </form>
    </div>

</div>
<hr>
<div class="body">
    <table class="table table-striped">
        <tr>
            <td>No</td>
            <td>州(省)</td>
            <td>国家</td>
            <td th:text="${allData.get(0).getDateList().get(0)}+'(当日新增)'"></td>
            <td>总确诊数</td>
        </tr>
        <tr th:each="data,dataStat:${allData}">
            <td th:if="'All' == ${c}" th:text="${dataStat.count}"></td>
            <td th:if="'All' == ${c}" th:text="${data.getState()}"></td>
            <td th:if="'All' == ${c}" th:text="${data.getCountry()}"></td>
            <td th:if="'All' == ${c}" th:text="${data.getDayAdd().get(data.getDateList().get(0))}"></td>
            <td th:if="'All' == ${c}" th:text="${data.getLatestTotalCases()}"></td>
        </tr>
        <tr th:each="data,dataStat:${allData}">
            <td th:if="${data.getCountry()} == ${c}" th:text="${dataStat.count}"></td>
            <td th:if="${data.getCountry()} == ${c}" th:text="${data.getState()}"></td>
            <td th:if="${data.getCountry()} == ${c}" th:text="${data.getCountry()}"></td>
            <td th:if="${data.getCountry()} == ${c}" th:text="${data.getDayAdd().get(data.getDateList().get(0))}"></td>
            <td th:if="${data.getCountry()} == ${c}" th:text="${data.getLatestTotalCases()}"></td>
        </tr>
    </table>
</div>
<hr>
<div class="bottom">
    <p>@作者：Wangzh</p>
    <p>源码地址：https://gitee.com/Kim_zhihua/springboot-experiment3</p>
</div>
</body>
</html>